<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>积分商城</title>
    <div th:include="includeJs::includeJs"></div>
    <div th:include="includeJs::bootstrap_js"></div>
</head>
<style>
    .card{
        border: none;
    }
    .span_zuo{
        position: absolute;
        z-index: 99;
        cursor: pointer;

    }
    .span_zuo:hover{
        background-color: #88878526;
    }
    .span_you{
        position: absolute;
        z-index: 99;
        cursor: pointer;

    }
    .span_you:hover{
        background-color: #88878526;
    }
    .jianjie{
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300px;
        float: left;
    }
    #NavigationBtn{
        position: fixed;
        z-index: 999;
        left: 95%;
        top: 74%;
    }
    .list #shouwan{
        -webkit-animation:changeright 6s linear infinite;
        -webkit-transform-origin:29.1% 0%; /* Safari and Chrome */
    }
    @-webkit-keyframes changeright{
        0%{
            -webkit-transform:rotate(7deg);
        }

        50%{
            -webkit-transform:rotate(0deg);
        }

        100%{
            -webkit-transform:rotate(7deg);
        }
    }


</style>

<body>
    <div th:replace="includeJs::dingding_header"></div>

    <div class="clear"></div>
    <div th:replace="includeJs::dingding_nav"></div>

    <div style="display:none;z-index: 987;position: absolute;width: 390px;
    box-shadow: 0px 0px 7px #0000006b;
    background-color: rgba(255, 255, 255, 0.82);border: 1px solid rgba(183, 183, 183, 0.32);" id="showInfo">
        <div class="col-md-4 d-flex align-items-center">
            <div class="d-flex flex-row align-items-center">
                <ul class="list">
                    <li><img class="show_image" style="width: 180px;margin-bottom: 10px" alt=""></li>
                    <li><h5 class="show_name">电动牙刷</h5></li>
                    <li class="show_jianjie" style="font-size:13px;width: 330px;">撒大苏打大苏打实打实打算</li>
                    <li style=" font-size: 20px;color: #df2020;"><font class="show_price" ></font>积分 &nbsp;&nbsp;&nbsp; 库存剩余<span class="kucun"></span></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="addressList" style="display:none;z-index:989;position: absolute;box-shadow: 0px 0px 7px #0000006b;" class="col-md-4 grid-margin grid-margin-md-0 stretch-card">
        <div class="card">
            <div class="card-body">
                <ul name="addressList" class="list-arrow">

                </ul>
            </div>
        </div>
    </div>
    <div style="display: none;
    z-index: 988;
    padding: 10px;
    border: 5px solid #7dd498;
    position: absolute;
    height: 220px;
    background-color: #fffffff7;" id="orderShow">
        <div class="col-md-4 d-flex align-items-center">
            <div class="d-flex flex-row align-items-center">
                <ul class="list">
                    <input type="text" hidden class="id" />
                    <input type="text" hidden class="count" />
                    <li style="color: #c65151;"><h5 style=" float: left;margin-right: 12px;" class="show_name"></h5><h5 style="float: left;" class="show_price" >123123</h5><h5>积分</h5></li>
                    <li style="width: 500px;">
                        <span class="addressName"><font class="userName"></font><font name="phone" style="color: #00dac6;font-style: italic;font-family: fantasy;"></font></span>
                        <span class="addressInfo" style="margin-left: 15px;"></span>
                        <a href="javascript:void(0)" id="gengduo" type="button" class="btn btn-info btn-sm" style="margin-left: 15px;">更多</a>
                    </li>
                    <li class="remark" style="margin-top: 15px;"><input type="text" autocomplete="off" class="form-control" style="width: 400px;" name="remark" placeholder="订单备注" /></li>
                    <li style="margin-top: 20px;" class="btnGroup">
                        <button type="button" name="yes" class="btn btn-outline-success btn-fw">确认</button>
                        <button type="button" name="no" class="btn btn-outline-danger btn-fw">取消</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="NavigationBtn" class="btn-group-vertical" role="group" aria-label="Basic example">
        <a type="button" href="#dianzi" class="btn btn-primary" title="电子专区">
            <i class="mdi mdi-cellphone"></i>
        </a>
        <a type="button" href="#food" class="btn btn-primary" title="食品专区">
            <i class="mdi mdi-food"></i>
        </a>
        <a type="button" href="#life" class="btn btn-primary" title="日常专区">
            <i class="mdi mdi-view-array"></i>
        </a>
        <a type="button" href="#coupon" class="btn btn-primary" title="优惠券兑换">
            <i class="mdi mdi-credit-card menu-icon"></i>
        </a>
    </div>
    <div class="col-lg-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2 grid-margin stretch-card">
                        <div class="card">
                                <img th:src="@{/image/dianzi.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-10 grid-margin stretch-card" style="width: 1216px;height: 657px;">
                        <div class="card">
                            <span class="span_zuo" id="dianzi_zuo" style="margin-top: 270px;margin-left: -30px;">
                                <input id="dianzi_up" hidden type="text" value="">
                                <i class="mdi mdi-chevron-left" style="font-size: 70px"></i>
                            </span>
                            <div class="card-body">
                                <h2 class="card-title"><a name="dianzi"></a>电子产品<hr></h2>
                                <div class="row" id="dianzi">

                                </div>
                            </div>
                            <span class="span_you" id="dianzi_you" style="margin-left: 980px;margin-top: 270px;">
                                <input id="dianzi_down" type="text" hidden value="">
                                <input id="dianzi_count" type="text" hidden value="">
                                <i class="mdi mdi-chevron-right" style="font-size: 70px"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 grid-margin stretch-card">
                        <div class="card">
                            <img th:src="@{/image/shiwu.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-10 grid-margin stretch-card" style="width: 1216px;height: 657px;">
                        <div class="card">
                            <span class="span_zuo" id="shiwu_zuo" style="margin-top: 270px;margin-left: -30px;">
                                <input id="shiwu_up" hidden type="text" value="">
                                <i class="mdi mdi-chevron-left" style="font-size: 70px"></i>
                            </span>
                            <div class="card-body">
                                <h2 class="card-title"><a name="food"></a>零食专区<hr></h2>
                                <div class="row" id="shiwu">

                                </div>
                            </div>
                            <span class="span_you" id="shiwu_you" style="margin-left: 980px;margin-top: 270px;">
                                <input id="shiwu_down" type="text" hidden value="">
                                <input id="shiwu_count" type="text" hidden value="">
                                <i class="mdi mdi-chevron-right" style="font-size: 70px"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 grid-margin stretch-card">
                        <div class="card">
                            <img th:src="@{/image/dianzi.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-10 grid-margin stretch-card" style="width: 1216px;height: 657px;">
                        <div class="card">
                            <span class="span_zuo" id="life_zuo" style="margin-top: 270px;margin-left: -30px;">
                                <input id="life_up" hidden type="text" value="">
                                <i class="mdi mdi-chevron-left" style="font-size: 70px"></i>
                            </span>
                            <div class="card-body">
                                <h2 name="life" class="card-title">日常用品<hr></h2>
                                <div class="row" id="life">

                                </div>
                            </div>
                            <span class="span_you" id="life_you" style="margin-left: 980px;margin-top: 270px;">
                                <input id="life_down" type="text" hidden value="">
                                <input id="life_count" type="text" hidden value="">
                                <i class="mdi mdi-chevron-right" style="font-size: 70px"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 grid-margin stretch-card">
                        <div class="card">
                            <img th:src="@{/image/shiwu.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-10 grid-margin stretch-card" style="width: 1216px;height: 657px;">
                        <div class="card">
                            <span class="span_zuo" id="coupon_zuo" style="margin-top: 270px;margin-left: -30px;">
                                <input id="coupon_up" hidden type="text" value="">
                                <i class="mdi mdi-chevron-left" style="font-size: 70px"></i>
                            </span>
                            <div class="card-body">
                                <h2 name="coupon" class="card-title">优惠券专区<hr></h2>
                                <div class="row" id="coupon">

                                </div>
                            </div>
                            <span class="span_you" id="coupon_you" style="margin-left: 980px;margin-top: 270px;">
                                <input id="coupon_down" type="text" hidden value="">
                                <input id="coupon_count" type="text" hidden value="">
                                <i class="mdi mdi-chevron-right" style="font-size: 70px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/layer/layer.js}"></script>
<script type="text/javascript">
    $(function() {
        //加载食物用品
        a();
        //加载电子产品
        b();
        //加载日常用品
        c();
        //加载优惠券
        d();

        //食物、电子、日常用品的分页
        $("#dianzi_zuo").click(function () {
            $("#dianzi").empty();
            var page = $("#dianzi_zuo").find("#dianzi_up").val();
            page -=1;
           if(page<1) {
               page = 1;
            }
            $.post('/dianziList',{page:page},function (data) {
                $("#dianzi_up").val(data.page.page);
                $("#dianzi_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#dianzi").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/"+value.goods_image+"\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>"+value.goods_name+"</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">"+value.goods_synopsis+"</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                },'json')

            })
        });
        $("#dianzi_you").click(function () {
            $("#dianzi").empty();
            var page = $("#dianzi_zuo").find("#dianzi_up").val();
            var count = $("#dianzi_you").find("#dianzi_count").val();
            page +=1;
            //console.log(count);
            if(page>count){
                page = count;
            }
            $.post('/dianziList', {page: page}, function (data) {
                $("#dianzi_up").val(data.page.page);
                $("#dianzi_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#dianzi").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/" + value.goods_image + "\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>" + value.goods_name + "</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">" + value.goods_synopsis + "</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                }, 'json')

            })
        });
        $("#shiwu_zuo").click(function () {
            $("#shiwu").empty();
            var page = $("#shiwu_zuo").find("#shiwu_up").val();
            page -=1;
            if(page<1) {
                page = 1;
            }
            $.post('/shiwuList',{page:page},function (data) {
                $("#shiwu_up").val(data.page.page);
                $("#shiwu_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#shiwu").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/"+value.goods_image+"\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>"+value.goods_name+"</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">"+value.goods_synopsis+"</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                },'json')

            })
        });
        $("#shiwu_you").click(function () {
            $("#shiwu").empty();
            var page = $("#shiwu_zuo").find("#shiwu_up").val();
            var count = $("#shiwu_you").find("#shiwu_count").val();
            page +=1;
            //console.log(count);
            if(page>count){
                page = count;
            }
            $.post('/shiwuList', {page: page}, function (data) {
                $("#shiwu_up").val(data.page.page);
                $("#shiwu_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#shiwu").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/" + value.goods_image + "\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>" + value.goods_name + "</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">" + value.goods_synopsis + "</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                }, 'json')

            })
        });
        $("#life_zuo").click(function () {
            $("#life").empty();
            var page = $("#life_zuo").find("#life_up").val();
            page -=1;
            if(page<1) {
                page = 1;
            }
            $.post('/lifeList',{page:page},function (data) {
                $("#life_up").val(data.page.page);
                $("#life_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#life").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/"+value.goods_image+"\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>"+value.goods_name+"</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">"+value.goods_synopsis+"</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                },'json')

            })
        });
        $("#life_you").click(function () {
            $("#life").empty();
            var page = $("#life_zuo").find("#life_up").val();
            var count = $("#life_you").find("#life_count").val();
            page +=1;
            if(page>count){
                page = count;
            }
            $.post('/lifeList', {page: page}, function (data) {
                $("#life_up").val(data.page.page);
                $("#life_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#life").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/" + value.goods_image + "\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +

                        "                                                <li><h5 class='name'>" + value.goods_name + "</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">" + value.goods_synopsis + "</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                }, 'json')

            })
        });
        $("#coupon_zuo").click(function () {
            $("#coupon").empty();
            var page = $("#coupon_zuo").find("#coupon_up").val();
            page -=1;
            if(page<1) {
                page = 1;
            }
            $.post('/couponList',{page:page},function (data) {
                $("#coupon_up").val(data.page.page);
                $("#coupon_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#coupon").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/"+value.goods_image+"\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>"+value.goods_name+"</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">"+value.goods_synopsis+"</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden class='goods_id' value="+value.goods_id+" type='text' /><input hidden class='outTime' value="+value.effective_time+" /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun_c\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li class='exchange_coupon'><button type=\"button\" class=\"btn btn-success\">兑换</button></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                },'json')

            })
        });
        $("#coupon_you").click(function () {
            $("#coupon").empty();
            var page = $("#coupon_zuo").find("#coupon_up").val();
            var count = $("#coupon_you").find("#coupon_count").val();
            page +=1;
            if(page>count){
                page = count;
            }
            $.post('/couponList', {page: page}, function (data) {
                $("#coupon_up").val(data.page.page);
                $("#coupon_down").val(data.page.page);
                let shouWanImage;
                let show = "none";
                let show2 = "block";
                $.each(data.obj,function(index,value) {
                    if(value.goods_stock == 0){
                        shouWanImage = "/images/shouwan.png";
                        show = "block";
                        show2 = "none";
                    }else {
                        show = "none";
                        show2 = "block";
                    }
                    $("#life").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                        "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                        "                                            <ul class=\"list\">\n" +
                        "                                                <li><img class='show_image' src=\"/" + value.goods_image + "\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                        "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                        "                                                <li><h5 class='name'>" + value.goods_name + "</h5></li>\n" +
                        "                                                <li><font class='jianjie' style=\"font-size: 12px;\">" + value.goods_synopsis + "</font></li>\n" +
                        "                                                <li style=\"color: #b01e27\"><input hidden class='goods_id' value="+value.goods_id+" type='text' /><input hidden class='outTime' value="+value.effective_time+" /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun_c\">"+value.goods_stock+"</span></li>\n" +
                        "                                                <li class='exchange_coupon'><button type=\"button\" class=\"btn btn-success\">兑换</button></li>\n" +
                        "                                            </ul>\n" +
                        "                                        </div>\n" +
                        "                                    </div>")
                }, 'json')

            })
        });

        //详细展示
        $("#dianzi").on('mousemove','.list',function (event) {
            $("#showInfo").css("display","block");
            if(event.pageX+10 > 1140){
                $("#showInfo").css("left",event.pageX-500);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());

            }else {
                $("#showInfo").css("left",event.pageX+10);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text())
            }
        });
        $("#dianzi").on('mouseout','.list',function () {
            $("#showInfo").css("display","none");
        });
        $("#life").on('mousemove','.list',function (event) {
            $("#showInfo").css("display","block");
            if(event.pageX+10 > 1140){
                $("#showInfo").css("left",event.pageX-500);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());

            }else {
                $("#showInfo").css("left",event.pageX+10);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());
            }
        });
        $("#life").on('mouseout','.list',function () {
            $("#showInfo").css("display","none");
        });
        $("#shiwu").on('mousemove','.list',function (event) {
            $("#showInfo").css("display","block");
            if(event.pageX+10 > 1140){
                $("#showInfo").css("left",event.pageX-500);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());

            }else {
                $("#showInfo").css("left",event.pageX+10);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());
            }
        });
        $("#shiwu").on('mouseout','.list',function () {
            $("#showInfo").css("display","none");
        });
        $("#coupon").on('mousemove','.list',function (event) {
            $("#showInfo").css("display","block");
            if(event.pageX+10 > 1140){

                $("#showInfo").css("left",event.pageX-500);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());

            }else {
                $("#showInfo").css("left",event.pageX+10);
                $("#showInfo").css("top",event.pageY+10);
                $("#showInfo").find(".show_image").attr("src",$(this).find(".show_image").attr("src"));
                $("#showInfo").find(".show_name").text($(this).find(".name").text());
                $("#showInfo").find(".show_jianjie").text($(this).find(".jianjie").text());
                $("#showInfo").find(".show_price").text($(this).find(".jifen").text());
                $("#showInfo").find(".kucun").text($(this).find(".kucun").text());
            }
        });
        $("#coupon").on('mouseout','.list',function () {
            $("#showInfo").css("display","none");
        });
        $.post('selAddress',function (data) {
            let flag = true;
            if(data.length == 0){
                $("[name = addressList]").html("<a href='http://localhost:8080/myAddress'>点击我添加地址</a>")
                $(".userName").html("<a href='http://localhost:8080/myAddress'>点击我添加地址</a>")
            }
            $.each(data,function (index,val) {
                if(val.state == 1){
                    flag = false;
                    $(".userName").text(val.user_name);
                    $(".addressInfo").text(val.address+" "+val.detailed_address);
                    $("[name = phone]").text(val.phone);

                } else if(flag){
                    $(".userName").text("您没有默认选择的地址,请点击更多选择其它地址");
                    $(".addressInfo").text("");
                    $("[name = phone]").text("");
                    flag = true;
                }
                $("[name = addressList]").append("<li style='margin-bottom: 12px;'><font name=\"userName\" style=\"margin-right: 10px;\">"+val.user_name+"</font><font class=\"phone\" style=\"margin-right: 10px;\">"+val.phone+"</font><font class=\"address\">"+val.address+" "+val.detailed_address+"</font><a class=\"select\" style='float: right;\n" +
                    "    color: #0ea784;\n" +
                    "    cursor: pointer;'>确定</a></li>\n")
            },'json');
        });
        $("#gengduo").click(function (event) {
            $("#addressList").css("display","block");
            $("#addressList").css("left",event.pageX-250);
            $("#addressList").css("top",event.pageY+15);
        });
        $("[name = addressList]").on('click','.select',function () {
            let name = $(this).prevAll("[name = userName]").text();
            let phone = $(this).prevAll(".phone").text();
            let address = $(this).prevAll(".address").text();
            $(".userName").text(name);
            $(".addressInfo").text(address);
            $("[name = phone]").text(phone);

            $("#addressList").css("display","none");
        });
        $("#orderShow").on('mouseout ',function () {
            $("#addressList").css("display","none");
        });
        $("#addressList").on('mouseover ',function () {
            $("#addressList").css("display","block");
        });
        //兑换
        $(".card-body").on('click','[name = exchange]',function (event) {
            let this_ = $(this).parents("li");
            let jifen = $(this).parents("li").prevAll().find(".jifen").text();
            let id = $(this).parents("li").prevAll().find(".goods_id").val();
            let name = $(this).parents("li").prevAll().find(".name").text();
            let count = $(this).parents("li").prevAll().find(".kucun").text();
            $("#orderShow").find(".show_name").text(name);
            $("#orderShow").find(".show_price").text(jifen);
            $("#orderShow").find(".id").val(id);
            $("#orderShow").find(".count").val(count);
            $("#orderShow").css("display","block");
            $("#orderShow").css("left",event.pageX);
            $("#orderShow").css("top",event.pageY);
            if(event.pageX+10 > 1000) {
                $("#orderShow").css("left",event.pageX-500);
                $("#orderShow").css("top",event.pageY+10);
            }else {
                $("#orderShow").css("left",event.pageX+10);
                $("#orderShow").css("top",event.pageY+10);
            }

        });

        $(".row").click(function () {
            $("#orderShow").css("display","none");
        });

        //关闭交易弹窗
        $("[name = no]").click(function () {
            $("#orderShow").css("display","none");
            $("[name = remark]").val("");
        });
        //确认交易
        $("[name = yes]").click(function () {
            $("[name = yes]").attr("disabled",true);
            $("#orderShow").css("display","none");
            $("#remark").val("");
            let id = $(this).parents(".list").find(".id").val();
            let jifen = $(this).parents(".list").find(".show_price").text();
            let goodsName = $(this).parents(".list").find(".show_name").text();
            let phone = $(this).parents(".list").find("[name = phone]").text();
            let name = $(this).parents(".list").find(".userName").text();
            let addressInfo = $(this).parents(".list").find(".addressInfo").text();
            let remark = $(this).parents(".list").find("[name = remark]").val();
            if(phone == '' || phone == null){
                layer.msg('您没有选择地址',{icon:2});
            }
            $.post('/point_exchange',{id:id,jifen:jifen,name:goodsName},function (data) {
                if(data == '成功'){
                    layer.msg('兑换成功',{icon:1});
                    $("[name = yes]").attr("disabled",false);
                    $.post('/orderAdd',{userName:name,userPhone:phone,userAddress:addressInfo,remarks:remark},function (data) {
                       if(data == 'yes'){
                           layer.msg('订单已生成',{icon:1});
                           $("[name = yes]").attr("disabled",false);
                       }else if(data == 'error'){
                           layer.msg('订单生成失败',{icon:2});
                           $("[name = yes]").attr("disabled",false);
                       }
                    },"text");
                }else if (data == '积分不足') {
                    layer.msg('积分不足',{icon:2});
                    $("[name = yes]").attr("disabled",false);
                }else if (data == null){
                    layer.msg('删除失败');
                    $("[name = yes]").attr("disabled",false);
                }else if(data == 'soldOut'){
                    layer.msg('非常抱歉物品已兑换完',{icon:2});
                    $("[name = yes]").attr("disabled",false);
                }
                a();
                b();
                c();
            });
        })
        //兑换优惠券
        $("#coupon").on('click','.exchange_coupon',function () {
            var jifen = $(this).prevAll().find(".jifen").text();
            var id = $(this).prevAll().find(".goods_id").val();
            var name = $(this).prevAll().find(".name").text();
            var outTime = $(this).prevAll().find(".outTime").val();
            layer.confirm('确认要兑换'+name+'吗? 所需积分'+jifen,{isOutAnim:false},function(index){
                $.post('/coupon_exchange',{id:id,jifen:jifen,name:name,outTime:outTime},function (data) {
                    if(data == '成功'){
                        layer.msg('兑换成功',{icon:1});
                    }else if (data == '积分不足') {
                        layer.msg('积分不足',{icon:2});
                    }else if (data == null){
                        layer.msg('删除失败');
                    }
                });
                layer.close(index);
            });
        })
    });

    //食物列表
    function a() {
        $.post('/shiwuList',{page:1},function (data) {
            $("#shiwu").empty();
            $("#shiwu_up").val(data.page.page);
            $("#shiwu_down").val(data.page.page);
            $("#shiwu_count").val(data.page.pageAll);
            let shouWanImage;
            let show = "none";
            let show2 = "block";
            $.each(data.obj,function(index,value) {
                if(value.goods_stock == 0){
                    shouWanImage = "/images/shouwan.png";
                    show = "block";
                    show2 = "none";
                }else {
                    show = "none";
                    show2 = "block";
                }
                $("#shiwu").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                    "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                    "                                            <ul class=\"list\">\n" +
                    "                                                <li><img class='show_image' src=\"/"+value.goods_image+"\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                    "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                    "                                                <li><h5 class='name'>"+value.goods_name+"</h5></li>\n" +
                    "                                                <li><font class='jianjie' style=\"font-size: 12px;\">"+value.goods_synopsis+"</font></li>\n" +
                    "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                    "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                    "                                            </ul>\n" +
                    "                                        </div>\n" +
                    "                                    </div>")
            })
        },'json');
    }
    //电子列表
    function b() {
        $.post('/dianziList',{page:1},function (data) {
            $("#dianzi").empty();
            $("#dianzi_up").val(data.page.page);
            $("#dianzi_down").val(data.page.page);
            $("#dianzi_count").val(data.page.pageAll);
            let shouWanImage;
            let show = "none";
            let show2 = "block";
            $.each(data.obj,function(index,value) {
                if(value.goods_stock == 0){
                    shouWanImage = "/images/shouwan.png";
                    show = "block";
                    show2 = "none";
                }else {
                    show = "none";
                    show2 = "block";
                }
                $("#dianzi").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                    "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                    "                                            <ul class=\"list\">\n" +
                    "                                                <li><img class='show_image' src=\"/"+value.goods_image+"\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                    "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                    "                                                <li><h5 class='name'>"+value.goods_name+"</h5></li>\n" +
                    "                                                <li><font class='jianjie' style=\"font-size: 12px;\">"+value.goods_synopsis+"</font></li>\n" +
                    "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                    "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                    "                                            </ul>\n" +
                    "                                        </div>\n" +
                    "                                    </div>")
            })
        },'json');
    }
    //日常用品
    function c() {
        $.post('/lifeList',{page:1},function (data) {
            $("#life").empty();
            $("#life_up").val(data.page.page);
            $("#life_down").val(data.page.page);
            $("#life_count").val(data.page.pageAll);
            let shouWanImage;
            let show = "none";
            let show2 = "block";
            $.each(data.obj, function (index, value) {
                if(value.goods_stock == 0){
                    shouWanImage = "/images/shouwan.png";
                    show = "block";
                    show2 = "none";
                }else {
                    show = "none";
                    show2 = "block";
                }
                $("#life").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                    "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                    "                                            <ul class=\"list\">\n" +
                    "                                                <li><img class='show_image' src=\"/" + value.goods_image + "\" style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                    "                                                <li><img id='shouwan' src='/images/shouwan.png' style=\"display:"+show+";top: -5px;left: 115px;width: 108px;position: absolute;cursor: pointer;\" alt=\"\"></li>\n" +
                    "                                                <li><h5 class='name'>" + value.goods_name + "</h5></li>\n" +
                    "                                                <li><font class='jianjie' style=\"font-size: 12px;\">" + value.goods_synopsis + "</font></li>\n" +
                    "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.goods_id+" type='text' /><font class='jifen' >"+value.goods_price+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun\">"+value.goods_stock+"</span></li>\n" +
                    "                                                <li ><a type=\"button\" href='javascript:void(0)' name='exchange' class=\"btn btn-success\">兑换</a></li>\n" +
                    "                                            </ul>\n" +
                    "                                        </div>\n" +
                    "                                    </div>")
            });
        }, 'json');
    }
    //优惠券兑换
    function d() {
        $.post('/couponList',{page:1},function (data) {
            $("#coupon_up").val(data.page.page);
            $("#coupon_down").val(data.page.page);
            $("#coupon_count").val(data.page.pageAll);
            $.each(data.obj, function (index, value) {
                $("#coupon").append("<div class=\"col-md-4 d-flex align-items-center\">\n" +
                    "                                        <div class=\"d-flex flex-row align-items-center\">\n" +
                    "                                            <ul class=\"list\">\n" +
                    "                                                <li><img class='show_image' src='/images/coupon.png' style=\"width: 130px;height:130px;margin-bottom: 10px;cursor: pointer\" alt=\"\"></li>\n" +
                    "                                                <li><h5 class='name'>" + value.coupon_name + "</h5></li>\n" +
                    "                                                <li><font class='jianjie' style=\"font-size: 12px;\">" + value.coupon_info + "</font></li>\n" +
                    "                                                <li style=\"color: #b01e27\"><input hidden  class='goods_id' value="+value.id+" type='text' /><input hidden class='outTime' value="+value.effective_time+" /><font class='jifen' >"+value.want_point+"</font>积分&nbsp;&nbsp;&nbsp;库存剩余<span class=\"kucun_c\">不限</span></li>\n" +
                    "                                                <li class='exchange_coupon'><button type=\"button\" class=\"btn btn-success\">兑换</button></li>\n" +
                    "                                            </ul>\n" +
                    "                                        </div>\n" +
                    "                                    </div>")
            });
        }, 'json');
    }
</script>
</html>